<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>学生信息列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container mt-5">
    <h2 class="mb-4">学生信息管理</h2>

    <!-- 新增按钮 -->
    <a href="/student/toAdd" class="btn btn-primary mb-3">新增学生</a>

    <!-- 搜索表单 -->
    <div class="row mb-3">
        <div class="col-md-3"> <!-- 将搜索框限制在中等屏幕及以上的 6/12 宽度 -->
            <form th:action="@{/student/list}" method="get" class="d-flex">
                <input type="text" name="keyword" class="form-control me-2" placeholder="请输入姓名或学号"
                    th:value="${keyword}">
                <button type="submit" class="btn btn-success">搜索</button>
                <a th:href="@{/student/list}" class="btn btn-outline-secondary ms-2"
                    th:if="${keyword != null and keyword != ''}">清空</a>
            </form>
        </div>
    </div>

    <!-- 学生列表 -->
    <table class="table table-bordered table-hover">
        <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- Thymeleaf 循环渲染学生列表 -->
            <tr th:each="student : ${students}">
                <td th:text="${student.id}"></td>
                <td th:text="${student.studentId}"></td>
                <td th:text="${student.name}"></td>
                <td th:text="${student.age}"></td>
                <td th:text="${student.gender}"></td>
                <!-- 格式化时间（Thymeleaf 内置工具类） -->
                <td th:text="${#dates.format(student.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                <td>
                    <!-- 编辑按钮（携带ID） -->
                    <a th:href="@{/student/toEdit/{id}(id=${student.id})}" class="btn btn-sm btn-warning">编辑</a>
                    <!-- 删除按钮（携带ID，添加确认提示） -->
                    <a th:href="@{/student/delete/{id}(id=${student.id})}" class="btn btn-sm btn-danger"
                        onclick="return confirm('确定要删除该学生吗？')">删除</a>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 分页导航条 -->
    <nav th:if="${pageInfo.pages > 1}" aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <!-- 首页和上一页 -->
            <li class="page-item" th:classappend="${pageInfo.pageNum == 1} ? 'disabled' : ''">
                <a class="page-link"
                    th:href="@{/student/list(keyword=${keyword}, pageNum=1, pageSize=${pageInfo.pageSize})}"
                    aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item" th:classappend="${pageInfo.pageNum == 1} ? 'disabled' : ''">
                <a class="page-link"
                    th:href="@{/student/list(keyword=${keyword}, pageNum=${pageInfo.pageNum - 1}, pageSize=${pageInfo.pageSize})}"
                    aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <!-- 页码列表 -->
            <li class="page-item" th:each="num : ${#numbers.sequence(1, pageInfo.pages)}"
                th:classappend="${num == pageInfo.pageNum} ? 'active' : ''">
                <a class="page-link"
                    th:href="@{/student/list(keyword=${keyword}, pageNum=${num}, pageSize=${pageInfo.pageSize})}"
                    th:text="${num}">1</a>
            </li>

            <!-- 下一页和末页 -->
            <li class="page-item" th:classappend="${pageInfo.pageNum == pageInfo.pages} ? 'disabled' : ''">
                <a class="page-link"
                    th:href="@{/student/list(keyword=${keyword}, pageNum=${pageInfo.pageNum + 1}, pageSize=${pageInfo.pageSize})}"
                    aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            
            <li class="page-item" th:classappend="${pageInfo.pageNum == pageInfo.pages} ? 'disabled' : ''">
                <a class="page-link"
                    th:href="@{/student/list(keyword=${keyword}, pageNum=${pageInfo.pages}, pageSize=${pageInfo.pageSize})}"
                    aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>


    <!-- 引入 Bootstrap JS（可选，用于交互） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>